<template>
	<div class="bg  weui-panel" style="width: 100%; height: 100%;">
		<!-- 显示选择二维码图片的 -->
		<div v-show="showImgFlag"
			style="width: 100%;height: 100%;position: absolute;z-index: 2021;background: rgba(0, 0, 0, 0.3);">
			<img style="width: 100%;height: 80%;" :src="localId">
			<button @click="saveImg" class="btn">确定选择</button>
			<button @click="showImgFlag =!showImgFlag" class="btn"
				style="background-color: gray;color: white;">取消</button>
		</div>

		<div class="weui-cell">
			<input type="button" style="width: 15%;" class="btn returnBtn" @click="goBack" value="返回"></input>
		</div>
		<div class="weui-cells">
			<a class="weui-cell weui-cell_access">
				<div class="weui-cell__bd ">
					<span class=" fl">姓名</span>
				</div>
				<div v-if="account !=''" @click="showNameFlag = true" class="weui-cell__ft weui-cells__tips">
					{{userInfo.name}}
				</div>
				<div v-else style="width: 80%;">
					<input style="height: 1.25rem;width: 80%;" class="weui-cell__ft inputSl" v-model="userInfo.name" />
				</div>
			</a>
			<a class="weui-cell weui-cell_access">
				<div class="weui-cell__bd ">
					<span class=" fl">微信图片二维码</span>
				</div>
				<div class="weui-cell__hd " style="width: 20%;">
					<button style="width: 60%;font-size: 12px;padding: 5px;color: black;" @click="toUpload"
						class="weui-btn">选择图片</button>
				</div>
				<div class="weui-cell__ft " style="width: 20%;">
					<img @click="showImg" style="width: 100%;height: 100%;" :src="localId">
				</div>
			</a>
			<div class="weui-cell weui-cell_active ">
				<div class="weui-cell__bd ">
					<span class=" fl">工号</span>
				</div>
				<div v-if="account !=''" class="weui-cell__ft weui-cells__tips">{{userInfo.account}}</div>
				<div v-else style="width: 80%;">
					<input style="height: 1.25rem;width: 80%;" class="weui-cell__ft inputSl"
						v-model="userInfo.account" />
				</div>
			</div>
			<a class="weui-cell weui-cell_access">
				<div class="weui-cell__bd ">
					<span class=" fl">电话</span>
				</div>
				<div v-if="account !=''" @click="showPhoneFlag = true" class="weui-cell__ft weui-cells__tips">
					{{userInfo.telePhone}}
				</div>
				<div v-else style="width: 80%;">
					<input style="height: 1.25rem;width: 80%;" class="weui-cell__ft inputSl"
						v-model="userInfo.telePhone" />
				</div>
			</a>
			<a class="weui-cell weui-cell_access">
				<div class="weui-cell__bd ">
					<span class=" fl">地址</span>
				</div>
				<div v-if="account !=''" @click="showAddressFlag = true" class="weui-cell__ft weui-cells__tips">
					{{userInfo.address}}
				</div>
				<div v-else style="width: 80%;">
					<input style="height: 1.25rem;width: 80%;" class="weui-cell__ft inputSl"
						v-model="userInfo.address" />
				</div>
			</a>
			<div class="weui-cell weui-cell_active ">
				<div class="weui-cell__bd ">
					<span class=" fl">角色</span>
				</div>
				<div v-if="account !=''" class="weui-cell__ft weui-cells__tips">
					<span>{{positionName}}</span>
				</div>
				<div v-else>
					<select class="weui-select" v-model="userInfo.position">
						<option value="" selected="selected">请选择</option>
						<option value="1">普通员工</option>
						<option value="A">超级管理员</option>
					</select>
				</div>
			</div>
			<a class="weui-cell weui-cell_access">
				<div class="weui-cell__bd ">
					<span class=" fl">邮箱</span>
				</div>
				<div v-if="account !=''" @click="showEmailFlag = true" class="weui-cell__ft weui-cells__tips">
					<span>{{userInfo.email}}</span>
				</div>
				<div v-else style="width: 80%;">
					<input style="height: 1.25rem;width: 80%;" class="weui-cell__ft inputSl" v-model="userInfo.email" />
				</div>
			</a>
			<a class="weui-cell " href="javascript:;">
				<div class="weui-cell__hd ">
					<span class=" fl" style="color: #000;">个人简介</span>
				</div>
				<div class="weui-cell__bd " style="margin-left:0.3125rem;width: 70%;">
					<textarea class="inputSl weui-textarea" style="width: 80%;height: 60px;width: 100%" rows="3"
						v-model="userInfo.staffDesc"></textarea>
				</div>
			</a>
		</div>
		<div v-if="account =='' " class="weui-panel__ft">
			<button @click="saveStaff" class="btn"> 保存</button>
		</div>
		<div v-if=" account !=''&& oldDesc !=userInfo.staffDesc " class="weui-panel__ft">
			<button @click="saveStaff" class="btn"> 保存</button>
		</div>
		<!-- 弹框填写 -->
		<div class="dialogMain" v-if="showAddressFlag">
			<div class="bodymain">
				<div class="weui-cell__bd df">
					<span style="margin: 3px;display: inline-block;width: 100%;"></span>
				</div>
				<div class="weui-cell__ft weui-cells__tips">
					<textarea rows="5" style="height: 3.125rem;" placeholder="请输入地址" class="weui-input" type="text"
						v-model="userInfo.address"></textarea>
				</div>
				<div class="weui-cell__ft">
					<a @click="saveStaff" style="width: 40%;display: inline-block;"
						class="weui-btn weui-btn_cell-primary">保存</a>
					<a @click="showAddressFlag = !showAddressFlag" style="display: inline-block;"
						class="weui-btn weui-btn_cell-primary">返回</a>
				</div>
			</div>
		</div>
		<div class="dialogMain" v-if="showEmailFlag">
			<div class="bodymain">
				<div class="weui-cell__bd df">
					<span style="margin: 3px;display: inline-block;width: 100%;">邮箱</span>
				</div>
				<div class="weui-cell__ft weui-cells__tips">
					<input placeholder="请输入邮箱" class="weui-input" v-model="userInfo.email" type="text" />
				</div>
				<div class="weui-cell__ft">
					<a @click="saveStaff" style="width: 40%;display: inline-block;"
						class="weui-btn weui-btn_cell-primary">保存</a>
					<a @click="showEmailFlag = !showEmailFlag" style="display: inline-block;"
						class="weui-btn weui-btn_cell-primary">返回</a>
				</div>
			</div>
		</div>
		<div class="dialogMain" v-if="showNameFlag">
			<div class="bodymain">
				<div class="weui-cell__bd df">
					<span style="margin: 3px;display: inline-block;width: 100%;">姓名</span>
				</div>
				<div class="weui-cell__ft weui-cells__tips">
					<input placeholder="请输入姓名" class="weui-input" v-model="userInfo.name" type="text" />
				</div>
				<div class="weui-cell__ft">
					<a @click="saveStaff" style="width: 40%;display: inline-block;"
						class="weui-btn weui-btn_cell-primary">保存</a>
					<a @click="showNameFlag = !showNameFlag" style="display: inline-block;"
						class="weui-btn weui-btn_cell-primary">返回</a>
				</div>
			</div>
		</div>
		<div class="dialogMain" v-if="showPhoneFlag">
			<div class="bodymain">
				<div class="weui-cell__bd df">
					<span style="margin: 3px;display: inline-block;width: 100%;">电话</span>
				</div>
				<div class="weui-cell__ft weui-cells__tips">
					<input placeholder="请输入电话" class="weui-input" v-model="userInfo.telePhone" type="text" />
				</div>
				<div class="weui-cell__ft">
					<a @click="saveStaff" style="width: 40%;display: inline-block;"
						class="weui-btn weui-btn_cell-primary">保存</a>
					<a @click="showPhoneFlag = !showPhoneFlag" style="display: inline-block;"
						class="weui-btn weui-btn_cell-primary">返回</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		isAndroid
	} from '@/utils/utils' //引入
	import configs from '@/utils/config.js' //引入
	import uwLoadJs from '@/utils/uwLoad'
	import {
		createJsapiSignature,
		downloadImgFronWx,
	} from '@/apis/wx/weixinJs.js'
	import constant from '@/utils/constant'
	import {
		saveStaff,
		getStaffInfo
	} from '@/apis/tech/tech.js'
	import apis from '@/utils/apis.js'
	import {
		showMsg
	} from '@/apis/common/common.js'
	export default {
		data() {
			return {
				userInfo: {},
				positionName: '',
				showAddressFlag: false,
				showEmailFlag: false,
				showNameFlag: false,
				showPhoneFlag: false,
				account: "",
				oldDesc: "", //原始个人介绍
				localId: '', //微信二维码图片
				showImgFlag: false, //预览标记
				serverId: '', //腾讯保存图片的地址，用于后端请求缓存到本地
				thisPath:'',//当前页面的path
			}
		},
		created() {
			let param = this.$route.params;
			if (param && JSON.stringify(param) != "{}") {
				//修改来的
				this.account = param.account;
				this.getStaffInfo();
			}
			this.thisPath = this.$router.history.current.path;
			this.getTicker();

		},
		methods: {
			saveImg() {
				this.$showLoading({
					showLoadingToastFlag: true,
				});
				this.showImgFlag = !this.showImgFlag
				//此处请求后端保存图片
				downloadImgFronWx(apis.downloadImgFronWx, {
					"medical_id": this.serverId
				}).then(res => {
					if (res.resultCode == constant.SUCCESS) {
						this.caseInfo.imgPath = configs.FILEBASEURL + res.resultMsg;
						showMsg(this,"上传成功！", null, "success");
					} else {
						showMsg(this,"上传失败，请稍后重试！");
						this.localId = "";
					}
					this.$hideLoading();
				}).catch(err => {
					this.$hideLoading();
				});
			},
			showImg() {
				this.showImgFlag = true;
			},
			getTicker() {
				this.$showLoading({
					showLoadingToastFlag: true,
				});
				let that = this;
				let fullUrl = constant.PROJECTPATH + this.thisPath;
				let url = "";
				console.log("getTicker url1" + window.location.href.split('#')[0])
				console.log("window.__wxjs_is_wkwebview: " + window.__wxjs_is_wkwebview)
				console.log("fullUrl: " + fullUrl)
				if (window.__wxjs_is_wkwebview === true) {
					url = fullUrl.split('#')[0]
				} else {
					url = window.location.href.split('#')[0]
				}
				console.log("getTicker url2" + url)
				url = encodeURIComponent(url);
				debugger
				console.log("getTicker ur3" + url)
				createJsapiSignature(apis.createJsapiSignature + "?url=" + url).then(res => {
					if (res.resultCode == constant.SUCCESS && res.data != null) {
						let jsapiSignature = res.data;
						console.log("jsapiSignature:" + JSON.stringify(jsapiSignature))
						this.$wx.config({
							debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: jsapiSignature.appId, // 必填，公众号的唯一标识
							timestamp: jsapiSignature.timestamp, // 必填，生成签名的时间戳
							nonceStr: jsapiSignature.nonceStr, // 必填，生成签名的随机串
							signature: jsapiSignature.signature, // 必填，签名
							jsApiList: ['chooseImage', 'uploadImage', 'getLocalImgData',
								'downloadImage'
							] // 必填，需要使用的JS接口列表
						});

					}
					this.$hideLoading();
				}).catch(err => {
					that.$toast({
						text: "选择图片初始化失败 请刷新重试!",
						type: 'warning',
						duration: 1000
					})
					this.$hideLoading();
				})
			},
			toUpload() {
				const that = this;
				return new Promise((resolve, reject) => {
					that.$wx.chooseImage({
						count: 1, // 默认9
						sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success: function(res) {
							// self.localIds = res.localIds
							console.log(res, '--------------------')
							that.syncUpload(res.localIds, 0)
						},
						cancel: function(res) {
							console.log('---------chooseImage:cancel----')
							console.log(res)
							resolve({
								image: res.errMsg
							})
						},
						fail: function(res) {
							console.log('---------chooseImage:faild----')
							console.log(res)
							reject({
								message: res.errMsg
							})
						}
					})
				})
			},
			async syncUpload(localIds, index) {
				const self = this
				console.log('异步请求syncUpload')
				self.$wx.uploadImage({
					localId: localIds[index],
					isShowProgressTips: 1, // 默认为1，显示进度提示
					success: async res => {
						self.serverId = res.serverId; // 返回图片的服务器端ID
						console.log("serverId:" + self.serverId);
						self.syncDownload(self.serverId);
					}
				})
			},
			async syncDownload(serverId) {
				const self = this
				console.log('异步请求syncDownload')
				self.$wx.downloadImage({
					serverId: serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
					isShowProgressTips: 1, // 默认为1，显示进度提示
					success: function(res) {
						var localId = res.localId; // 返回图片下载后的本地ID
						console.log("download localId:" + localId);
						if (isAndroid()) {
							self.localId = localId;
						} else {
							self.getLocalImgData(localId);
						}
					},
					fail: function(res) {
						console.log('-------------syncDownload:faild----')
						console.log(res)
						reject({
							message: res.errMsg
						})
					}
				});
			},
			//苹果需要下载到本地才能在页面上看
			async getLocalImgData(localId) {
				const self = this
				console.log('异步请求getLocalImgData')
				self.$wx.getLocalImgData({
					localId: localId, // 图片的localID
					success: function(res) {
						var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
						localData = localData.replace('jgp',
							'jpeg'); //iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下  
						self.localId = localData;
					}
				});
			},

			getPositionName(code) {
				let name = '';
				let position = constant.positionType;
				for (var i in position) {
					if (position[i].value == code) {
						name = position[i].label;
					}
				}
				return name;
			},
			goBack() {
				this.$router.go(-1);
			},
			getStaffInfo() {
				getStaffInfo(apis.getStaffInfo + "?account=" + this.account).then(res => {
					if (res.resultCode == constant.SUCCESS && res.data) {
						this.userInfo = res.data;
						//初始化获取数据库图片数据
						this.localId = this.userInfo.qrcodePath;
						this.oldDesc = res.data.staffDesc
						this.positionName = this.getPositionName(this.userInfo.position);
					}
				})
			},
			saveStaff() {
				this.showAddressFlag = false;
				this.showPhoneFlag = false;
				this.showEmailFlag = false;
				this.showNameFlag = false;
				this.$showLoading({
					showLoadingToastFlag: true
				})
				saveStaff(apis.saveStaff, this.userInfo).then(res => {
					if (res.resultCode == constant.SUCCESS) {
						showMsg(this, "修改成功", null, "success")
					} else {
						showMsg(this, "修改失败")
					}
					this.$hideLoading()
				}).catch(err => {
					this.$hideLoading()
				})
			}
		}
	}
</script>

<style scoped="scoped">
	@import "../../assets/css/returnBtn.css";

	.inputSl {
		border: none;
		background-color: #f6ecec;
	}

	.fl {
		display: grid;
	}

	.bdtitle {
		flex: none;
		width: 25%;
	}

	.dialogMain {

		width: 100%;
		height: 100%;
		text-align: center;
		vertical-align: middle;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, .33);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 888;
		overflow: auto;
	}

	.bodymain {
		border-radius: 5px;
		background-color: #fff;
		opacity: 1;
		overflow: auto;
		max-width: 40.625rem;
		width: 90%;
	}
</style>
